<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/masterLayout.xhtml">

	<ui:define name="title">
			UNIDAD
	</ui:define>

	<ui:define name="content">

		<p:growl id="mensajes" showDetail="true" life="7000" />

		<h:outputText value="RESPONSIVE WEB DESIGN" class="asterisco" />

		<p:panel id="panel" header="LISTADO DE UNIDADES"
			style="margin-bottom:10px;">

			<h:form id="formDataTable">

				<p:focus context="formDataTable" />

				<p:dataTable id="tablaUnidadess" var="unidad" scrollable="true"
					styleClass="ui-datatable-scrollable-body"
					value="#{unidadBean.listaUnidades}" paginator="true" rows="10"
					emptyMessage="#{msg['lbl.mensajeTabla']}"
					paginatorPosition="bottom"
					rowStyleClass="#{unidad.activo eq true ? null:'desactivo'}">

					<f:facet name="header">
						<h:form>
							<p:tooltip for="btnNuevo" value="#{msg['lbl.insertar']}" />
							<p:commandButton update=":formNuevo"
								oncomplete="PF('unidadDialogoNuevo').show()" id="btnNuevo"
								icon="ui-icon-plus" styleClass="botonNuevo"
								actionListener="#{unidadBean.limpiar}" />
						</h:form>
					</f:facet>

					<p:column headerText="#{msg['lbl.gestionar']}"
						style="text-align:center;width: 100px;">

						<p:tooltip for="btnMostrar" value="MOSTRAR" />
						<p:tooltip for="btnEditar" value="EDITAR" />
						<p:tooltip for="btnEliminar"
							value="#{unidad.activo eq true ? msg['lbl.desactivar']:msg['lbl.activar']}" />

						<p:commandButton id="btnMostrar" update=":formMostrar"
							oncomplete="PF('unidadDialogoMostrar').show()"
							icon="ui-icon-newwin">
							<f:setPropertyActionListener value="#{unidad}"
								target="#{unidadBean.unidad}" />
						</p:commandButton>

						<p:commandButton id="btnEditar" update=":formEditar"
							oncomplete="PF('unidadDialogoEditar').show()"
							icon="ui-icon-pencil"
							disabled="#{unidad.pordefecto eq true ? true:false}">
							<f:setPropertyActionListener value="#{unidad}"
								target="#{unidadBean.unidad}" />
						</p:commandButton>

						<p:commandButton id="btnEliminar" update=":formEliminar"
							oncomplete="PF('unidadDialogoEliminar').show()"
							icon="#{unidad.activo eq true ? 'ui-icon-close':'ui-icon-check'}"
							disabled="#{unidad.pordefecto eq true ? true:false}">
							<f:setPropertyActionListener value="#{unidad}"
								target="#{unidadBean.unidad}" />
						</p:commandButton>

					</p:column>

					<p:column headerText="NOMBRE" filterBy="#{unidad.nombre}"
						style="text-align:center;width: 200px;">  
            			#{unidad.nombre}  
        			</p:column>

					<p:column headerText="ABREVIATURA" filterBy="#{unidad.nombre}"
						style="text-align:center;width: 100px;">  
            			#{unidad.abreviatura}  
        			</p:column>
				</p:dataTable>
			</h:form>
		</p:panel>

		<h:form id="formEliminar">
			<p:dialog widgetVar="unidadDialogoEliminar" severity="alert"
				header="#{msg['lbl.eliminar']}" showEffect="explode"
				hideEffect="fold" modal="false" resizable="false" width="230px"
				style="text-align: center;">
				<h:inputHidden value="#{unidadBean.unidad.unidadid}" />
				<br />
				<ui:param name="appreciated"
					value="¿ DESEA DESACTIVAR LA UNIDAD: #{unidadBean.unidad.nombre} ?" />
				<ui:param name="notAppreciated"
					value="¿ DESEA ACTIVAR LA UNIDAD: #{unidadBean.unidad.nombre} ?" />
				<h:outputText
					value="#{unidadBean.unidad.activo eq true ? appreciated : notAppreciated}" />
				<br />
				<br />
				<p:commandButton value="#{msg['btn.aceptar']}"
					update=":formDataTable, :mensajes" icon="#{msg['iconoAceptar']}"
					oncomplete="PF('unidadDialogoEliminar').hide()"
					actionListener="#{unidadBean.eliminar}" />
				<p:commandButton value="CANCELAR" type="button"
					onclick="PF('unidadDialogoEliminar').hide()"
					icon="#{msg['iconoCancelar']}" />
			</p:dialog>
		</h:form>

		<p:dialog header="INSERTAR UNIDAD" widgetVar="unidadDialogoNuevo"
			resizable="false" modal="fasle" showEffect="clip" hideEffect="fold"
			id="dialogoNuevo" width="auto">

			<h:form id="formNuevo">

				<p:focus context="formNuevo" />

				<h:panelGrid columns="2" cellpadding="1">
					<h:outputText value="NOMBRE:" />
					<p:inputText id="nombre" value="#{unidadBean.unidad.nombre}"
						required="true" requiredMessage="INGRESE UN UNIDAD" label="nombre"
						onblur="this.value=this.value.toUpperCase();" style="width: 100%;" />
					<h:outputText value="ABREVIATURA:" />
					<p:inputText id="abreviatura"
						validatorMessage="MÁXIMO 2 CARACTERES" style="width: 100%;"
						value="#{unidadBean.unidad.abreviatura}" required="true"
						requiredMessage="INGRESE UNA ABREVIATURA" label="nombre"
						onblur="this.value=this.value.toUpperCase();">
						<f:validateLength maximum="2" />
					</p:inputText>

					<f:facet name="footer">
						<p:separator />
						<p:commandButton value="#{msg['btn.guardar']}"
							oncomplete="comprobar(xhr, status, args)"
							update=":formDataTable, :mensajes, formNuevo"
							id="btnNuevoAceptar" icon="#{msg['iconoGuardar']}"
							actionListener="#{unidadBean.insertar}" />
						<p:commandButton value="#{msg['btn.cancelar']}"
							oncomplete="PF('unidadDialogoNuevo').hide()" id="btnNuevolimpiar"
							icon="#{msg['iconoCancelar']}"
							actionListener="#{unidadBean.limpiar}" process="@this" />
					</f:facet>
				</h:panelGrid>
			</h:form>
		</p:dialog>

		<script type="text/javascript">
			//<![CDATA[
			function comprobar(xhr, status, args) {
				if (!args.validationFailed && args.error) {
					PF('unidadDialogoNuevo').hide();
					PF('unidadDialogoEditar').hide();
				}
			}
			//]]>
		</script>

		<p:dialog header="MOSTRAR UNIDAD" widgetVar="unidadDialogoMostrar"
			resizable="false" modal="false" showEffect="clip" hideEffect="fold"
			id="dialogoMostrar">
			<h:form id="formMostrar">

				<h:panelGrid id="panelMostrar" columns="2" cellpadding="1">
					<h:outputText value="NOMBRE:" />
					<h:outputText value="#{unidadBean.unidad.nombre}"
						style="font-weight:bold" />
					<h:outputText value="ABREVIATURA:" />
					<h:outputText value="#{unidadBean.unidad.abreviatura}"
						style="font-weight:bold" />
				</h:panelGrid>
			</h:form>
		</p:dialog>


		<p:dialog header="EDITAR UNIDAD" widgetVar="unidadDialogoEditar"
			resizable="false" modal="false" showEffect="clip" hideEffect="fold"
			id="dialogoEditar" width="auto">

			<h:form id="formEditar">

				<p:focus context="formEditar" />

				<h:panelGrid id="panelEditar" columns="2" cellpadding="1">

					<h:outputText value="NOMBRE:" />
					<p:inputText value="#{unidadBean.unidad.nombre}" required="true"
						style="width: 100%;" requiredMessage="INGRESE UN UNIDAD"
						onblur="this.value=this.value.toUpperCase();" />

					<h:outputText value="ABREVIATURA:" />
					<p:inputText id="abreviatura" style="width: 100%;"
						value="#{unidadBean.unidad.abreviatura}"
						validatorMessage="MÁXIMO 2 CARACTERES" required="true"
						requiredMessage="INGRESE UNA ABREVIATURA"
						onblur="this.value=this.value.toUpperCase();">
						<f:validateLength maximum="2" />
					</p:inputText>

					<f:facet name="footer">
						<p:separator />
						<p:commandButton value="#{msg['btn.guardar']}"
							update=":formDataTable, :mensajes, formEditar"
							oncomplete="comprobar(xhr, status, args)"
							id="btnModificarAceptar"
							actionListener="#{unidadBean.actualizar}" icon="ui-icon-disk" />

						<p:commandButton value="#{msg['btn.cancelar']}"
							oncomplete="PF('unidadDialogoEditar').hide()"
							id="btnModificarlimpiar" icon="ui-icon-close" />
					</f:facet>

				</h:panelGrid>
			</h:form>
		</p:dialog>

	</ui:define>
</ui:composition>
</html>